Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } .container{ width: 1350px; height: 400px; } body{ position: absolute; width: 100%; height: 100vh; background: url(https://www.frontendforever.com/uploads/assets/bg1.jpg); background-size: cover; } .stand{ position: absolute; width: 4%; height: 55%; background: linear-gradient(90deg,#ffffff,#6c6666); box-shadow:inset -10px -10px 5px gray,inset 5px 5px 10px gray; left: 630px; bottom: 0%; border-bottom: 3px solid rgba(0,250,0,0.2); } .fan{ position: relative; width: 80px; height: 80px; background:radial-gradient(#20BDFF,#5433FF); margin-left: 618px; margin-top: 20%; border: 1px solid black; border-radius: 50%; animation: rotate 15s linear infinite; } @keyframes rotate{ from{ } to{ transform: rotateZ(360deg); } } .fan span{ background: linear-gradient(90deg,skyblue,grey); width: 50%; height: 300px; border-radius: 50% 50% 0px 0px; } .fan span:nth-child(1){ position: absolute; left: -120px; top: -30px; transform: rotateZ(-120deg); } .fan span:nth-child(2){ position: absolute; left: 160px; top: -30px; transform: rotateZ(120deg); } .fan span:nth-child(3){ position: absolute; left: 20px; top: -270px; transform: rotateZ(360deg); } .circle{ width: 50px; height: 50px; background: radial-gradient(gray,white); border-radius: 50%; position: absolute; border: 1px solid gray; left: 634px; top: 285px; } /*----------------------------------------*/ .stand1{ position: absolute; width: 3%; height: 35%; background: linear-gradient(90deg,#ffffff,#6c6666); box-shadow: inset -3px -3px 5px gray,inset 5px 5px 10px gray; left: 155px; bottom: 0%; border-bottom: 3px solid rgba(0,250,0,0.2); } .fan1{ position: relative; width: 60px; height: 60px; background:radial-gradient(#20BDFF,#5433FF); border: 1px solid black; margin-left: 145px; margin-top: 4%; border-radius: 50%; animation: rotate 15s linear infinite; } .fan1 span{ background: linear-gradient(90deg,skyblue,gray); width: 40%; height: 150px; border-radius: 50% 50% 0px 0px; } .fan1 span:nth-child(1){ position: absolute; left: -50px; top: -5px; transform: rotateZ(-120deg); } .fan1 span:nth-child(2){ position: absolute; left: 90px; top: -5px; transform: rotateZ(120deg); } .fan1 span:nth-child(3){ position: absolute; left: 20px; top: -130px; transform: rotateZ(360deg); } .circle1{ width: 40px; height: 40px; background: radial-gradient(gray,white); border-radius: 50%; position: absolute; border: 1px solid gray; left: 155px; bottom: 200px; } /*---------------------------------------------*/ .stand2{ position: absolute; width: 3%; height: 35%; background: linear-gradient(90deg,#ffffff,#6c6666); box-shadow: inset -3px -3px 5px gray,inset 5px 5px 10px gray; right: 160px; bottom: 0%; border-bottom: 3px solid rgba(0,250,0,0.2); } .fan2{ position: relative; width: 60px; height: 60px; background:radial-gradient(#20BDFF,#5433FF); border: 1px solid black; margin-left: 1140px; margin-top: -4%; border-radius: 50%; animation: rotate 15s linear infinite; } .fan2 span{ background: linear-gradient(90deg,skyblue,gray); width: 40%; height: 150px; border-radius: 50% 50% 0px 0px; } .fan2 span:nth-child(1){ position: absolute; right:80px; top: -5px; transform: rotateZ(-120deg); } .fan2 span:nth-child(2){ position: absolute; right: -50px; top: -5px; transform: rotateZ(120deg); } .fan2 span:nth-child(3){ position: absolute; right: 20px; top: -130px; transform: rotateZ(360deg); } .circle2{ width: 40px; height: 40px; background: radial-gradient(gray,white); border: 1px solid gray; border-radius: 50%; position: absolute; right: 156px; bottom: 192px; }
console.log("Event Fired")